<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .web {
        display: flex;
      }
      .left {
        flex: 2;
        height: 100vh;
        background-color: pink;
      }
      .active {
        display: none;
      }
      .container {
        position: relative;
        flex: 8;
        height: 100vh;
      }
      header {
        height: 30vh;
        background-color: skyblue;
      }
      header button {
        position: absolute;
        top: 20px;
        left: 20px;
      }
      .tltle {
        position: absolute;
        top: 30px;
        left: 50%;
        width: 300px;
        height: 80px;
        transform: translateX(-50%);
        text-align: center;
        color: white;
      }
      .tltle button {
        position: absolute;
        width: 50px;
        height: 30px;
        border-radius: 10px;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
      }
      main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 490px;
      }
      main .money {
        height: 450px;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-right: solid;
      }
      main .money li {
        width: 200px;
        height: 50px;
        border: solid;
        border-radius: 5px;
        text-align: center;
        line-height: 50px;
      }
      .text {
        margin-left: 5px;
        height: 450px;
        width: 500px;
      }
      .text li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 500px;
        height: 40px;
      }
      .text li span:nth-child(2) {
        position: relative;
      }
      .text li:not(:first-child) span:nth-child(2)::after {
        content: '$';
        position: absolute;
        left: -10px;
      }
    </style>
  </head>
  <body>
    <div class="web">
      <div class="left active">
        <ul>
          <li>主页</li>
          <li>排行榜</li>
          <li>练习方式</li>
        </ul>
      </div>
      <div class="container">
        <header>
          <button>导航栏</button>
          <div class="tltle">
            <h2>欢迎来到富豪排行榜</h2>
            <span>weclome to the rich rank</span>
            <button>登录</button>
          </div>
        </header>
        <main>
          <ul class="money">
            <li class="add">添加账户</li>
            <li class="double">资金翻倍</li>
            <li class="search">查询百万富翁</li>
            <li class="sort">财富榜</li>
            <li class="count">计算总额</li>
          </ul>
          <ul class="text">
            <li><span>Person</span><span>Wealth</span></li>
          </ul>
        </main>
      </div>
    </div>
    <script>
      let dataInfo = [
        { name: 'English chan', money: 392001 },
        { name: 'alex chan', money: 568932 },
        { name: 'melon chan', money: 698756 },
        { name: 'Clare Langner', money: 292489 },
        { name: 'Abigail Rice', money: 953957 },
        { name: 'Clarice Dias', money: 168472 },
        { name: 'Vernon Lucas', money: 718225 },
        { name: 'Nina Schmidt', money: 889147 },
      ];
      let left = document.querySelector('.left');
      let btn = document.querySelector('button');
      // 左边侧栏
      btn.onclick = function () {
        left.classList.toggle('active');
      };
      let text = document.querySelector('.text');
      let addBtn = document.querySelector('.add');
      // 添加
      function addLi() {
        let num = 0;
        addBtn.onclick = function () {
          if (num >= dataInfo.length) return;
          text.innerHTML += `<li><span>${
            dataInfo[num].name
          }</span><span>${dataInfo[num].money.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')}</span></li>`;
          num++;
        };
      }
      addLi();
      // 翻倍
      let double = document.querySelector('.double');
      double.onclick = function () {
        let lis = [...document.querySelectorAll('.text li:not(:first-child)')];
        text.innerHTML = `<li><span>Person</span><span>Wealth</span></li>`;
        for (let i = 0; i < lis.length; i++) {
          text.innerHTML += `<li><span>${
            lis[i].children[0].textContent
          }</span><span>${Number(String(lis[i].children[1].textContent).replace(/\,/g, "") * 2).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')}</span></li>`;
        }
      };
      // 查询
      let search = document.querySelector('.search');
      search.onclick = function () {
        let lis = [...document.querySelectorAll('.text li:not(:first-child)')];
        text.innerHTML = `<li><span>Person</span><span>Wealth</span></li>`;
        lis = lis.filter((ele) => {
          return Number(ele.children[1].textContent.replace(/\,/g, "")) > 1000000;
        });
        for (let i = 0; i < lis.length; i++) {
          text.innerHTML += `<li><span>${
            lis[i].children[0].textContent
          }</span><span>${Number(lis[i].children[1].textContent.replace(/\,/g, "")).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')}</span></li>`;
        }
      };
      // 榜单排序
      let sort = document.querySelector('.sort');
      sort.onclick = function () {
        let lis = [...document.querySelectorAll('.text li:not(:first-child)')];
        text.innerHTML = `<li><span>Person</span><span>Wealth</span></li>`;
        lis = lis.sort((a, b) => {
          return b.children[1].textContent.replace(/\,/g, "") - a.children[1].textContent.replace(/\,/g, "");
        });
        for (let i = 0; i < lis.length; i++) {
          text.innerHTML += `<li><span>${
            lis[i].children[0].textContent
          }</span><span>${Number(lis[i].children[1].textContent.replace(/\,/g, "")).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')}</span></li>`;
        }
      };
      // 计算总额
      let count = document.querySelector('.count');
      count.onclick = function () {
        let lis = [...document.querySelectorAll('.text li:not(:first-child)')];
        let num = 0;
        num = lis.reduce((prev, ele) => {
          return prev + Number(ele.children[1].textContent.replace(/\,/g, ""));
        }, 0);
        let Li = document.createElement('li');
        Li.innerHTML = `<span>总额：</span><span>${num.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')}</span>`;
        text.append(Li);
      };
    </script>
  </body>
</html>
